<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Datetime - Custom</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
      }

      h2 {
        font-size: 12px;
        font-weight: normal;

        color: #6f7378;

        margin-top: 10px;
        margin-left: 5px;
      }

      @media screen and (max-width: 800px) {
        .grid {
          grid-template-columns: 1fr;
          padding: 0;
        }
      }

      /*
      * Custom Datetime Time / Wheel Parts
      * -------------------------------------------
      */

      .custom-grid-wheel {
        --background: rgb(245, 235, 247);
        --background-rgb: 245, 235, 247;
      }

      .custom-grid-wheel::part(time-button) {
        color: rgb(128, 30, 171);
      }

      .custom-grid-wheel::part(time-button active) {
        background-color: rgb(248, 215, 255);
      }

      .custom-grid-wheel {
        --wheel-highlight-background: rgb(218, 216, 255);
        --wheel-highlight-border-radius: 16px;
        --wheel-fade-background-rgb: 245, 235, 247;
      }

      ion-picker {
        --highlight-background: rgb(218, 216, 255);
        --highlight-border-radius: 16px;
        --fade-background-rgb: 245, 235, 247;

        background-color: rgb(245, 235, 247);
      }
      .custom-grid-wheel::part(wheel-item),
      ion-picker-column-option {
        color: rgb(255, 134, 154);
      }

      .custom-grid-wheel::part(wheel-item active),
      ion-picker-column-option.option-active {
        color: rgb(128, 30, 171);
      }

      /*
      * Custom Datetime Day Parts
      * -------------------------------------------
      */

      #custom-calendar-days::part(calendar-day) {
        background-color: #ffe2e6;

        color: #da5296;

        margin: 2px 0;
      }

      #custom-calendar-days::part(calendar-day today) {
        color: #8462d1;
      }

      #custom-calendar-days::part(calendar-day):focus {
        background-color: rgb(154 209 98 / 0.2);
        box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
      }

      #custom-calendar-days::part(calendar-day disabled) {
        background: rgba(0 0 0 / 0.2);
        color: black;
      }

      /*
      * Custom Material Design Datetime Day Parts
      * -------------------------------------------
      */

      #custom-calendar-days.md::part(calendar-day active),
      #custom-calendar-days.md::part(calendar-day active):focus {
        background-color: #9ad162;
        border-color: #9ad162;
        color: #fff;
      }

      #custom-calendar-days.md::part(calendar-day today) {
        border-color: #8462d1;
      }

      /*
      * Custom iOS Datetime Day Parts
      * -------------------------------------------
      */

      #custom-calendar-days.ios::part(calendar-day active),
      #custom-calendar-days.ios::part(calendar-day active):focus {
        background-color: rgb(154 209 98 / 0.2);
        color: #9ad162;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-header translucent="true">
        <ion-toolbar>
          <ion-title>Datetime - Custom</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <div class="grid">
          <div class="grid-item">
            <h2>Grid Style</h2>
            <ion-datetime id="custom-grid" value="2020-03-14T14:23:00.000Z" class="custom-grid-wheel"></ion-datetime>
          </div>
          <div class="grid-item">
            <h2>Wheel Style</h2>
            <ion-datetime
              id="custom-wheel"
              prefer-wheel="true"
              value="2020-03-14T14:23:00.000Z"
              class="custom-grid-wheel"
            ></ion-datetime>
          </div>
          <div class="grid-item">
            <h2>Grid Style</h2>
            <ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
          </div>
        </div>
      </ion-content>
    </ion-app>

    <script>
      const customDatetime = document.querySelector('#custom-calendar-days');

      // Mock the current day to always have the same screenshots
      const mockToday = '2023-06-10T16:22:00.000Z';
      Date = class extends Date {
        constructor(...args) {
          if (args.length === 0) {
            super(mockToday);
          } else {
            super(...args);
          }
        }
      };

      customDatetime.highlightedDates = [
        {
          date: '2023-06-02',
          textColor: 'purple',
          backgroundColor: 'pink',
        },
        {
          date: '2023-06-04',
          textColor: 'firebrick',
          backgroundColor: 'salmon',
        },
        {
          date: '2023-06-06',
          textColor: 'blue',
          backgroundColor: 'lightblue',
        },
      ];

      customDatetime.isDateEnabled = (date) => {
        if (date === '2023-06-22') {
          return false;
        }

        return true;
      };
    </script>
  </body>
</html>
